<script setup>
import { onMounted, ref } from 'vue';
import { addCouponAPI } from '@/apis/coupon';
import { getAllCouponAPI } from '@/apis/coupon';
import { deleteCouponAPI } from '@/apis/coupon';
import { ElMessage } from 'element-plus';
const couponDialogVisible = ref(false)
const couponForm = ref({
    id: '',
    name: '',
    count: 0,
    amount: 0,
    minPoint: 0,
    startTime: '',
    mutual: '0',
    endTime: '',
    useType: '0',
    perLimit: '1',
    duration: '60',
    note: '',
    relateId: '',
    discount: 80
})
const type = ref('noLimit')
const coupons = ref([])

const showCouponDialog = () => {
    couponDialogVisible.value = true
}
const formRef = ref(null)
//添加优惠劵
const toAddCoupon = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            // 这里添加提交逻辑
            couponDialogVisible.value = false
            //发送请求
            await addCouponAPI(couponForm.value)
            ElMessage.success('添加成功！')
        }
    })

}
//获取优惠劵信息
const getAllCoupon = async () => {
    coupons.value = (await getAllCouponAPI()).data
}
onMounted(() => getAllCoupon())
//删除优惠劵
const confirm = (id) => {
    deleteCouponAPI(id)
    ElMessage.success('删除成功！')
    getAllCoupon()

}
//表单校验
const rules = {
    minPoint: [
        {
            validator: (rule, value, callback) => {
                if (value == 0) {
                    callback(new Error('满减金额不能为0'));
                } else if (value < couponForm.value.amount) {
                    callback(new Error('满减金额不能小于优惠劵面额！'));
                } else {
                    callback();
                }
            }
        }
    ],
    name: [
        { required: true, message: '名字不能为空', trigger: 'blur' }
    ],
    startTime: [
        { required: true, message: '开始时间不能为空', trigger: 'blur' }
    ],
    endTime: [
        { required: true, message: '截止时间不能为空', trigger: 'blur' }
    ],
    amount: [
        {
            validator: (rule, value, callback) => {
                if (value == 0) {
                    callback(new Error('优惠劵面额不能为0'));
                } else {
                    callback();
                }
            }
        }
    ]
}
</script>
<template>
    <el-card class="management-container">
        <template #header>
            <div class="header-wrapper">
                <span class="header-title">优惠券管理</span>
                <div class="action-buttons">
                    <el-button type="primary" @click="showCouponDialog">
                        新增优惠券
                    </el-button>
                </div>
            </div>
        </template>
        <el-table :data="coupons" border>
            <el-table-column prop="name" label="优惠券名称" />
            <el-table-column prop="amount" label="折扣" />
            <el-table-column prop="startTime" label="开始时间" />
            <el-table-column prop="endTime" label="截止时间" />
            <el-table-column label="操作" width="150">
                <template #default="scope">
                    <el-button size="small">编辑</el-button>
                    <el-popconfirm title="确认删除?" confirm-button-text="确认" cancel-button-text="取消"
                        @confirm="confirm(scope.row.id)">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 优惠券对话框 -->
    <el-dialog v-model="couponDialogVisible" title="优惠券信息">
        <el-form :model="couponForm" label-width="80px" :rules="rules" ref="formRef">
            <el-form-item label="名称" prop="name">
                <el-input v-model="couponForm.name" />
            </el-form-item>
            <el-form-item label="持续时间">
                <el-input v-model="couponForm.duration" />
            </el-form-item>
            <el-form-item label="类型">
                <el-radio-group v-model="type">
                    <el-radio-button label="无门槛" value="noLimit" />
                    <el-radio-button label="折扣" value="discount" />
                    <el-radio-button label="满减" value="limit" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="满减金额" v-if="type == 'limit'" prop="minPoint">
                <el-input-number v-model="couponForm.minPoint" :min="0" :max="100" />
            </el-form-item>
            <el-form-item label="金额" v-if="type != 'discount'" prop="amount">
                <el-input-number v-model="couponForm.amount" :min="0" :max="1000" />
            </el-form-item>
            <el-form-item label="折扣力度" v-if="type == 'discount'">
                <el-input-number v-model="couponForm.discount" :min="1" :max="100">
                    <template #suffix>
                        <span>%</span>
                    </template>
                </el-input-number>
            </el-form-item>
            <el-form-item label="数量">
                <el-input-number v-model="couponForm.count" :min="1" :max="1000" />
            </el-form-item>
            <el-form-item label="是否叠加">
                <el-radio-group v-model="couponForm.mutual">
                    <el-radio-button label="否" value="0" />
                    <el-radio-button label="是" value="1" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="领取限制">
                <el-radio-group v-model="couponForm.perLimit">
                    <el-radio-button label="限一张" value="1" />
                    <el-radio-button label="无限制" value="0" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="使用限制">
                <el-radio-group v-model="couponForm.useType">
                    <el-radio-button label="全场通用" value="0" />
                    <el-radio-button label="指定分类" value="1" />
                    <el-radio-button label="指定商品" value="2" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="分类id" v-if="couponForm.useType == 1">
                <el-input v-model="couponForm.relateId" />
            </el-form-item>
            <el-form-item label="商品id" v-if="couponForm.useType == 2">
                <el-input v-model="couponForm.relateId" />
            </el-form-item>
            <el-form-item label="开始日期" prop="startTime">
                <el-date-picker v-model="couponForm.startTime" type="date" />
            </el-form-item>
            <el-form-item label="截止日期" prop="endTime">
                <el-date-picker v-model="couponForm.endTime" type="date" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="couponDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="toAddCoupon">确认</el-button>
        </template>
    </el-dialog>
</template>
<style lang="scss" scoped>
.management-container {
    .header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;

        .header-title {
            font-size: 18px;
            font-weight: 500;
        }

        .action-buttons {
            display: flex;
            gap: 8px;
        }
    }

    .el-table {
        margin-top: 20px;
    }
}
</style>